<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器的二三事</title>
		<style type="text/css">
			.left {
				float: left;
			}
			.right {
				padding-left: 600px;
			}
			.li {
				display: flex;
				flex-direction: column;
				border: #000000 solid 1px;
				padding: 5px;
				border-radius: 4px;
				width: fit-content;
			}

			.li span:first-child::first-line {
				font-weight: 600;
			}

			.li+.li {
				margin-top: 10px;
			}

			.li span:not(:first-child) {
				margin-top: 5px;
				;
			}

			input {
				margin: 4px 0;
				line-height: 1;
				font-size: 16px;
				border-radius: 4px;
				padding: 5px;
				width: 400px;
			}

			[disabled] {
				background-color: red;
			}

			[disabled="true"] {
				background-color: orange;
			}

			[data-demo~="top"] {
				background-color: yellow;
			}

			[data-demo|="top"] {
				background-color: lightgreen
			}

			[data-test^="o"] {
				background-color: cyan;
			}

			[data-test$="wo"] {
				background-color: skyblue;
			}

			[data-test*="th"] {
				background-color: violet;
			}
		</style>
	</head>
	<body>
		<div class="left">
			<h3>属性值选择器，单词级，错一点都不行，且不能匹配空串</h3>
			<div class="li">
				<span>[attr]：选择有该属性的标签（值不论）</span>
				<span>如下：[disabled]</span>
				<input disabled value="标签：<input disabled>">
			</div>
			<div class="li">
				<span>[attr="val"]：选择属性值完全匹配的标签</span>
				<span>如下：[disabled="true"]</span>
				<input disabled="true" value="标签：<input disabled='true'>">
			</div>
			<div class="li">
				<span>[attr~="val"]：属性值单词完全匹配选择器</span>
				<span>如下：[data-demo~="top" ]</span>
				<input data-demo="top left" value="标签：<input data-demo='top left'>">
			</div>
			<div class="li">
				<span>[attr|="val"]：属性值单词完全匹配选择器（严格遵循完整单词+'_'的形式）</span>
				<span>用在多语言环境，例如lang有zh-cmn-Hant</span>
				<span>如下：[data-demo|="top" ]</span>
				<input data-demo="top-left" value="标签：<input data-demo='top-left'>">
			</div>
		</div>
		<div class="right">
			<h3>属性值正则匹配，这种匹配方式就是字符级（若要大小写不敏感，在后面加字母i）</h3>
			<div class="li">
				<span>[attr^="val"]：以val开头</span>
				<span>一般用来判断a标签地址类型</span>
				<span>如下：[disabled^="t"] 海蓝色</span>
				<input data-test="one" value="标签：<input data-test='one'>">
			</div>
			<div class="li">
				<span>[attr$="val"]：以val结尾</span>
				<span>一般用来判断文件类型（后缀）</span>
				<span>如下：[disabled$="t"] 海蓝色</span>
				<input data-test="two" value="标签：<input data-test='two'>">
			</div>
			<div class="li">
				<span>[attr*="val"]：包含val</span>
				<span>可以匹配style来判断是否是js控制的样式是否隐藏</span>
				<span>[style*="display:none"] 主流，写成啥样就是啥样</span>
				<span>[style*="display: none"] ie，因为ie会自动添加空格做样式美化</span>
				<span>[style*="DISPLAY: none"] ie8</span>
				<span>[style*="none"] 大多数情况够用，但在微信客户端打开时，会因为私自添加-webkit-touch-callout:none，而失效</span>
				<span>如下：[disabled*="t"] 海蓝色</span>
				<input data-test="three" value="标签：<input data-test='three'>">
			</div>
		</div>
	</body>
</html>
